<template>
	<view>
		<view class="topPart">
			<view class="headPic">
				<image class="img" :src="userInfo.imgSrc"></image>
			</view>
			<view class="text">
				我的账户余额(元)
			</view>
			<view class="balance">
				{{userInfo.balance}}
			</view>
			<view class="totalCon">
				总消费：{{userInfo.cost}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.selUserInfo();
		},
		data() {
			return {
				userInfo: {}
			};
		},
		methods: {
			selUserInfo() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: "api/appuser/selUserInfo",
					header: {
						"authority": jwt
					},
					method: 'GET',
					success: (res) => {
						console.log(res.data.data);
						if (res.data.code == 200) {
							this.userInfo = res.data.data;
						}
						// this.user = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.topPart {
		height: 500rpx;
		width: 750rpx;
		background-color: #fb6e6e;
		padding-top: 100rpx;

		.headPic {
			height: 100rpx;
			// background-color: gray;
			width: 100rpx;
			margin: 0 auto;
			margin-right: 370rpx;
			margin-bottom: 140rpx;

			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}

		.text {
			height: 100rpx;
			color: #fff;
			font-weight: bold;
			margin: 0 auto;
			width: 220rpx;
			margin-left: 280rpx;
		}

		.balance {
			height: 100rpx;
			color: #fff;
			// font-weight: bold;
			margin: 0 auto;
			width: 200rpx;
			margin-left: 220rpx;
			margin-top: -50rpx;
			font-size: 70rpx;
		}

		.totalCon {
			height: 100rpx;
			color: #fff;
			// font-weight: bold;
			margin: 0 auto;
			width: 200rpx;
			margin-left: 290rpx;
			margin-top: 50rpx;
			font-size: 25rpx;
		}
	}
</style>